<template>
  <div class="page" style="">
    <div class="print_title">离职申请详情 · 禾美环保</div>
    <p class="title">基础信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; margin: 0 0 14px 0;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.billNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >离职人员:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.employeeId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >人员编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.employeeNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所在部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.departmentId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所属团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ filterMultiDictText(this.dictOptions['teamId'], formData.teamId + '') }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所属公司:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.workUnit_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >岗位名称:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.positionId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >入职日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.entryTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >合同到期日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.contractTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >员工类别:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.employeeType_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >离职类型:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.resignType_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >离职原因:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.resignReason }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >备注:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.remark }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    
    <p class="title">评价信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; margin: 0 0 14px 0;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >离职日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.resignTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >薪资截止日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.salaryEndDate }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >社保截止日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.socialSecurityDeadline }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >公积金截止日期:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.accumulationFundDate }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >资产/物品:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.assets }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >借款/次数:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.loanMoney }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >工作交接:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.workHandover_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >档案资料:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.profiles }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >培训扣款(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.trainingDeduction }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >电脑扣款(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.computerDeduction }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >其他扣款(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.otherDeduction }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row type="flex" justify="center">
      <a-col>
        <p class="title_table">培训扣款</p>
      </a-col>
      <a-col :span="24">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
    </a-row>

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if=" dataHistorySource && dataHistorySource.length" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
  import { getAction, getFileAccessHttpUrl } from '@/api/manage'
  import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
  import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
  import address from '@/components/AddressChoice/address.js'
  import moment from 'moment';
  export default {
    props: {
      formBpm: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: () => {},
        required: true
      },
      formDataHistory: {
        type: Object,
        default: () => {}
      }
    },
    components: {
      FileInfor,
      ProcessInfor
    },
    data() {
      return {
        filterMultiDictText,
        moment,
        address, // code地址
        getFileAccessHttpUrl,
        dictOptions: {},
        dataHistorySource: [], // 流程列表
        dataSource: [],
        url: {
          historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
          queryById: '/api/erp/administration/seal/erpSealAuthorizationInformation/queryById', // 獲取詳情
          teamQueryById: '/api/erp/omc/teammanager/erpOmcTeamManager/queryById',
          teamQueryByIds: '/api/erp/omc/teammanager/erpOmcTeamManager/queryByIds'
        },
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '培训开始日期',
            align: 'center',
            dataIndex: 'beginDate',
            customRender: function (text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: '培训结束日期',
            align: 'center',
            dataIndex: 'endDate',
            customRender: function (text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: '培训机构',
            align: 'center',
            dataIndex: 'institution'
          },
          {
            title: '培训项目',
            align: 'center',
            dataIndex: 'project'
          },
          {
            title: '取得证书名称',
            align: 'center',
            dataIndex: 'certificate'
          },
          {
            title: '培训服务期限',
            align: 'center',
            dataIndex: 'trainingServiceLimit_dictText'
          },
          {
            title: '服务期限起止时间',
            align: 'center',
            dataIndex: 'serviceStartDate',
            customRender: function (text, record) {
              return record.serviceStartDate + '~' + record.serviceEndDate
            }
          },
          {
            title: '培训费用(元)',
            align: 'center',
            dataIndex: 'trainingFee'
          },
          {
            title: '剩余应扣款(元)',
            align: 'center',
            dataIndex: 'remainingDeductions'
          }
        ],
        purchaseFile: [], // 附件
        ids_dictText: '' // 印章
      };
    },
    watch: {
      formData: {
        handler (val) {
            if (val) {
              // this.getHistoryList()
              this.loadData()
              this.initTeam(val.teamId)
              this.initDictConfig()
              if (val.attachment) {
                this.purchaseFile = val.attachment.split(',')
              }
            }
        },
        immediate: true
      },
      formDataHistory: {
        handler(val) {
          if (val) {
            this.getHistoryList()
          }
        },
        immediate: true
      }
    },
    methods: {
      // 获取列表
      getHistoryList() {
        var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
        getAction(this.url.historyList, params).then(res => {
            if (res.success) {
                this.dataHistorySource = res.result.records || res.result
            }
        })
      },
      loadData () {
        var params = { mainId: this.formData.id, pageSize: -1, pageNo: 1 };// 查询条件
        getAction('/api/erp/files/employee/erpEmployeeTrainingResign/list', params).then(res => {
          if (res.success) {
            this.dataSource = res.result.records || res.result
            if (this.dataSource && this.dataSource.length > 0) {
              this.dataSource.map(item => {
                if (this.formData.resignTime && item.serviceEndDate && item.serviceStartDate) {
                  // 判断离职日期是否大于结束日期
                  if (moment(this.formData.resignTime).isAfter(item.serviceEndDate)) {
                    item.remainingDeductions = '0.00'
                    return item
                  } else {
                    // 离职日期小于开始日期
                    if (moment(item.serviceStartDate).isAfter(this.formData.resignTime)) {
                      item.remainingDeductions = '0.00'
                      return item
                    }
                    const diffInDays = moment(item.serviceEndDate).diff(moment(this.formData.resignTime), 'days');
                    console.log('diffInDays', diffInDays)
                    item.remainingDeductions = ((diffInDays / Number(item.trainingServiceLimit || 0)) * (item.trainingFee || 0)).toFixed(2)
                    return item
                  }
                } else {
                  item.remainingDeductions = '0.00'
                  return item
                }
              })
            }
          }
        })
      },

      initTeam(ids) {
      if (ids && ids.length > 0) {
        var idArr = ids.split(',');
        let url = '';
        let param = {};
        if (idArr.length == 1) {
          url = this.url.teamQueryById;
          param = { id: ids };
        } else {
          url = this.url.teamQueryByIds;
          param = { ids: ids };
        }
        getAction(url, param).then((res) => {
          if (res.success) {
            if (!Array.isArray(res.result)) {
              this.$set(this.formData, 'teamId_dictText', res.result.tdnd + res.result.tdmc)
            } else {
              var name = ''
              res.result.map(value => {
                name = value.tdnd + value.tdmc + ',' + name
              })
              name = name.substr(0, name.length - 1)
              this.$set(this.formData, 'teamId_dictText', name)
            }
            // this.$nextTick(() => {
            //   this.$refs.inputModal.edit(res.result, this.ids);
            // })
            // this.disabledIds = false
          }
        });
      } else {
        this.$set(this.formData, 'teamId_dictText', '')
      }
    },

      // 加载数据字典信息
      initDictConfig() {
        initDictOptions('erp_org_position_level,level_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'positionName', res.result)
          }
        })
        initDictOptions('sys_depart,depart_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'approvalUnit', res.result)
            this.$set(this.dictOptions, 'departId', res.result)
          }
        })
        initDictOptions('sys_position,name,code').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'postCode', res.result)
          }
        })
        initDictOptions('YES_OR_NO').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'isDuty', res.result)
            this.$set(this.dictOptions, 'isVirtual', res.result)
          }
        })
        initDictOptions('reward_punish_category').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'rewardPunishCategory', res.result)
          }
        })

        initDictOptions('erp_omc_team_manager,alias_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'teamId', res.result)
          }
        })
        // initDictOptions('erp_company_files,file_name,id').then((res) => {
        //   if (res.success) {
        //     this.$set(this.dictOptions, 'workUnit', res.result)
        //   }
        // })
      },

      // 地址查询
      getArea(json, code) {
        let names = [];
        let codes = [];
        function findCity(list, code, father) {
          const index = list.findIndex(ev => {
            return ev.code === code;
          });

          if (index > -1) {
            const child = list[index];
            names.unshift(child.name);
            codes.unshift(child.code);
            father && names.unshift(father.name) && codes.unshift(father.code);
            father && findCity(json || [], father.code);
            return;
          }
          list.map(item => {
            if (item.children) {
              findCity(item.children || [], code, item);
            }
          });
        }
        findCity(json, code);
        names = [...new Set(names)];
        codes = [...new Set(codes)];
        return { codes, names };
      },

      tableRowClass(record, index) {
        if (index == 0) {
            return 'rowClass';
        }
        return ''
      }
    }
  };
</script>
<style lang="less" scoped>
  .page{
    background: #ffffff;
    padding: 19px 28px 0 28px;
    width: 750px;
    .print_title{
        font-size: 15px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
    }
    .title {
        background: #EEEEEE;
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        padding: 11px 9px;
    }
    .content {
        font-size: 13px;
    }

    .title_table{
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
  }
  /deep/ .rowClass{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead th{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead tr{
      background: #EEEEEE;
  }
  /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
      margin: 0 0px;
  }
  /deep/ .ant-table-body tr {
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
  .content {
    font-size: 13px;
  }
</style>
